<!doctype html>
<html lang="en">
  <head>
    <!-- lang="en" 用于进网页之后的解析中英文 -->
    <meta charset="utf-8">
    <!-- 提示浏览器使用最新硬核-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端优先的适配 配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS 引入 -->
    <link rel="stylesheet" href="bootstrap.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 	  <a href="#">我是经过bootstrap化的模板超链接标签</a>
    
    
    <!--
        Bootstrap 自带的很多逻辑 + 样式 都为如a的下划线等常用标签做了最好的配置
    -->
    <!--h1修饰的内容可以包括里面的自带元素,h1 也可以作为现有类实现个性化调用服务-->
	<h1>h1. Bootstrap heading    <span class="small">我是h1里面的小标题</span></h1>
	<h2>h2. Bootstrap heading</h2>
	<h3>h3. Bootstrap heading</h3>
	<h4>h4. Bootstrap heading</h4>
	<h5>h5. Bootstrap heading    <span class="small">我是h6里面的小标题</span></h5>
	<h6>h6. Bootstrap heading    <span class="small">我是h6里面的小标题</span></h6><br><br>
	<span class="h1">我是调用h1类的span标签</span>
	</hr>
 	<!--各种字体所有属性样品表
 		1. p 和 body下的 元素 有内置样式：页面主题样式
 		2. lead 中心内容
 		3. mark 内联文本内容
 	-->
 	<p>我是一条段落</p>
 	<p class="lead">我是一中心内容条</p>
 	<p class="mark">我是一条内敛文本内容</p>
 	<del>我是一条被删除的文本</del><br>
 	<s>我是一条无用语句</s><br>
 	<u>我是一条加下划线的语句</u><br>
 	<em>我是一条斜体</em>
 	<!--
     	文段内容所在位置
     -->
    <p class="text-left">我是左文案</p>
    <p class="text-center">我是中心文案<p>
    <p class="text-right">我是右文案</p>
    <p class="text-justify">我是两端对齐文案</p>
 	<p style="border: 1px solid black;width:30px;" class="text-nowrap">我是一条如果我的一行宽度小于文本长度就会自动换行的文段,但是我通过text-nowrap实现了可以在一行显示但是会超出表格</p><br>
 	
 	<!--用来改变大小写-->
 	<p class="text-lowercase">aBcD</p>
 	<p class="text-uppercase">aBcD</p>
 	<p class="text-capitalize">aBcD</p><!--首字母大写-->
     
    <!--粗略语-->
    <abbr title="这是我的title值没有">attr</abbr>  
    <abbr title="字体大小变小，并变成全大写" class="initialism">a1b2</abbr>
     
    <!--地址-->
    <address>
    	南京大学金陵学院
    </address>
    
    <!--引用-->
    <blockquote>
    	钢铁是怎样练成的
    	<!--增加引用来源-->
    	<footer>Someone in <cite>famous</cite></footer>
    </blockquote>
    <!--反向引用-->
    <blockquote class="block-reverse">  
    		<p>我是另一方向的结果输出</p>
    </blockquote>
    
    <!--设置列表 list-unstyled表示显示无特效的，list-inline 表示显示行级内容-->
    <ul class="list-unstyled">
    	<li>夏老师</li>
    	<li>叶老师</li>
    	<li>刘老师</li>
    	<li>孔老师</li>
    	<li>吴老师</li>
    </ul>
    <ol class="list-inline">
    	<li>夏老师</li>
    	<li>叶老师</li>
    	<li>刘老师</li>
    	<li>孔老师</li>
    	<li>吴老师</li>
    </ol>
    
    <!--描述-->
    <dl>
    	<dt>刘晨</dt>
    	<dd>——是一个小帅哥</dd>
    </dl>
    <!--描述在一行显示-->
    <dl class="dl-horizontal">
    	<dt>孔钦</dt>
    	<dd>——是一个小美女</dd>
    </dl>
    
    <!--内联代码样式 红色有阴影-->
    For Example, This is <code>&lt;code&gt;</code><br>
    
    <!--标记用户输入-->
    For Example, This is <kbd>Ctrl+</kbd>
    
    <!--展示代码语句-->
    <pre>import numpy</pre>
    
    <!--变量显示-->
    <var>x</var> = <var>m<var><var>y</var> + <var>b</var><br>
    
    <!--程序输出内容-->
    <samp>我是一段程序输出</samp><br>   
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.js"></script> 
  </body>
</html>
    